<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="./node_modules/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>
<script type="text/babel">
  // 使用JSX语法
  /* JSX语法规则
    1.定义虚拟DOM时，不要写引号
    2.标签中混入js表达式 也就是变量 要用引号{}
    3.样式的类名指定不要用class 使用className
    4.只允许有一个根节点(三种解决方法：[用一个div标签包裹/<></>/React.Fragment标签])
      4.1 3种解决办法的区别：前一种会生成多余的标签结构，后两种不会在浏览器中生成多余标签
      4.2 推荐用<></>
    5. 内联样式,要用style={{key:value}}的形式去写。
    6. 标签必须闭合
    7. 标签首字母
    7.1  (1),若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
  */
  let count=100
  let item=<>
      <div className="box">
          <h2 className="title">中奖列表</h2>
          <p>总数：{count}</p>
          <p style={{color:'red'}}>颜色</p>
      </div>
  </>
  // 创建根节点
  let root =ReactDOM.createRoot(document.getElementById('root'))
  // 渲染到页面
  root.render(item)
</script>